"use client";

import CommentTitleView from "@/app/[language]/forum/components/CommentTitleView";
import EssayTitleView from "@/app/[language]/forum/components/EssayTitleView";
import WantInput from "@/app/[language]/want/components/WantInput";
import useGetWant from "@/app/[language]/want/query/useGetWant";
import { useWantStore } from "@/state/Stores";
import { GetWantAPIComment, GetWantAPIEssay } from "@/type/wwwAPI";
import { useTranslations } from "next-intl";
import { useParams } from "next/navigation";
import { useEffect } from "react";
import InfiniteScroll from "react-infinite-scroll-component";
import { Col, ListGroup, ListGroupItemHeading, Row } from "reactstrap";
import { useWant } from "taehui-ts/fe-utilities";

export default function Page() {
  const t = useTranslations();

  const { setTextInput } = useWantStore();

  const { wantVariety } = useParams<{
    wantVariety: "essay" | "comment";
  }>();
  const { want } = useWant("/want");

  const {
    fetchNextPage,
    hasNextPage,
    data: { pages },
    isFetched: isWantLoaded,
  } = useGetWant(wantVariety, want);

  useEffect(() => {
    setTextInput(want);
  }, [setTextInput, want]);

  return (
    <>
      <WantInput />
      <hr />
      {isWantLoaded && (
        <Row className="g-0">
          <Col className="m-1">
            <ListGroupItemHeading>{t("wantView")}</ListGroupItemHeading>
            <ListGroup>
              <InfiniteScroll
                dataLength={pages.length}
                next={() => fetchNextPage()}
                hasMore={hasNextPage}
                loader={null}
              >
                {wantVariety === "essay" &&
                  (pages as GetWantAPIEssay[]).flatMap((wantedEssayTitle) => {
                    return (
                      <EssayTitleView
                        key={wantedEssayTitle.essayID}
                        forumID={wantedEssayTitle.forumID}
                        forumTitle={wantedEssayTitle.forumTitle}
                        essay={wantedEssayTitle}
                      />
                    );
                  })}
                {wantVariety === "comment" &&
                  (pages as GetWantAPIComment[]).flatMap(
                    (wantedCommentTitle) => {
                      return (
                        <CommentTitleView
                          key={wantedCommentTitle.essayID}
                          forumID={wantedCommentTitle.forumID}
                          essayID={wantedCommentTitle.essayID}
                          comment={wantedCommentTitle}
                        />
                      );
                    },
                  )}
              </InfiniteScroll>
            </ListGroup>
          </Col>
        </Row>
      )}
    </>
  );
}